<template>
  <div class="person_page">
    <div class="person wrap">
      <Crumb :nav="[{ name: '首页' }, { name: '个人中心' }]"></Crumb>
      <main>
        <aside>
          <div class="avatar" :style="{ backgroundImage: `url(${userInfo.headImg})` }"></div>
          <div class="name">
            {{ userInfo.nickName }}
            <span @click="loginOutFn" style="cursor: pointer">[退出]</span>
          </div>
          <div class="title">
            <img src="../assets/img/transaction.png" width="20" alt="交易管理" />
            交易管理
          </div>
          <ul class="list">
            <li :class="/\/person1/g.test($route.path) ? 'active' : ''">个人中心</li>
            <li :class="/\/person1/g.test($route.path) ? 'active' : ''">我的订单</li>
            <li :class="/\/cart/g.test($route.path) ? 'active' : ''" @click="ToCart">购物车</li>
            <li :class="/\/person1/g.test($route.path) ? 'active' : ''">消息通知</li>
            <li :class="/\/person1/g.test($route.path) ? 'active' : ''">积分明细</li>
            <li :class="/\/person1/g.test($route.path) ? 'active' : ''">积分攻略</li>
          </ul>
          <div class="title">
            <img src="../assets/img/transaction.png" width="20" alt="交易管理" />
            个人信息管理
          </div>
          <ul class="list">
            <li>地址管理</li>
            <li>账号安全</li>
          </ul>
        </aside>
        <article>
          <router-view @updateKey="updateKey"></router-view>
        </article>
      </main>
    </div>
  </div>
</template>
<script>
import Crumb from "@/components/Crumb.vue";
import store from "@/store";
import { mapState } from "vuex";
import Cookies from "js-cookie";
export default {
  data() {
    return {};
  },
  components: {
    Crumb
  },
  computed: {
    // token: Cookies.get('xx-auth-token'),
    ...mapState({
      userInfo: state => state.userinfo.userinfo,
      islogined:state=>state.loginstatus.islogined
    })
  },
  // created:{console.log(Cookies);},
  // watch: {
  //   'cookie.': function (newVal, oldVal) {
  //     if (!newVal) {this.$router.push("/home"); }
  //   },
  // },
  // watch: {
  //   'islogined': {
  //     handler(newVal, oldVal) {
  //       let mytoken = Cookie.get('x-auth-token')
  //       // if(mytoken){
  //       //   this.chanislogined(true)
  //       // }else{
  //       //   this.chanislogined(false)
  //       // }
  //       this.chanislogined(Boolean(mytoken))
  //     }
  //   }
  // },
  methods: {
    //更新topbar
    updateKey() {
      this.$emit("updateKey");
    },
    //进购物车
    ToCart() {
      this.$router.push("/user/cart");
    },
    loginOutFn() {
      // localStorage.removeItem("x-auth-token");
      Cookies.remove("x-auth-token");
      store.dispatch("showtoast/aysncchanisshowtoast", {
        msg: "退出成功！",
        type: "success"
      });
      setTimeout(() => {
        this.$router.push("/home");
      }, 2000);
    }
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    let token = Cookies.get("x-auth-token");
    // console.log(Cookies);
    // let token = localStorage.getItem("x-auth-token");
    if (token) {
      //如果存在 正常进入user页面
      next();
    } else {
      next({ path: '/home' })
      //  否则提示未登录
      Cookies.remove('x-auth-token')
      store.dispatch("showtoast/aysncchanisshowtoast", {
        msg: "请登陆！",
        type: "warning"
      });
    }
  }
  //还有其他两个钩子函数
  // beforeRouteUpdate() {},
  // beforeRouteLeave() {},
};
</script>
<style lang="scss" scoped>
@import "../assets/css/global.css";

.person_page {
  background: #fff;

  main {
    border-top: 1px solid #e1e1e1;
    padding: 28px 0 48px;
    display: flex;
    justify-content: space-between;
    background: #fff;

    aside {
      width: 200px;
      height: 740px;
      background: #e7e7e7;
      margin-right: 60px;
      box-sizing: border-box;
      padding: 30px 18px 0;

      .avatar {
        width: 100px;
        height: 100px;
        margin: auto;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .name {
        text-align: center;
        margin-top: 19px;
        margin-bottom: 43px;

        span {
          text-decoration: underline;
          color: #2a5df1;
        }
      }

      .title {
        font-size: 16px;
        color: #333333;
        display: flex;
        align-items: center;
        margin-bottom: 14px;

        img {
          margin-right: 6px;
        }
      }

      .list {
        li {
          margin-bottom: 17px;
          font-weight: 300;
          color: #666666;
          cursor: pointer;

          &.active {
            color: #0a328e;
            font-weight: bold;

            &::before {
              width: 2px;
              height: 14px;
              background: #0a328e;
              display: inline-block;
              content: "";
              margin-right: 10px;
            }
          }
        }
      }
    }

    article {
      flex: 1;
      padding: 20px 0 0 0px;
      box-sizing: border-box;
      background: #fff;
    }
  }
}
</style>